
require(['config'], () => {
    require(['jquery', 'artTemplate', 'cookie', 'include'], function ($, template) {
        class DetailPage {
            constructor() {
                this.detail = {}
                this.initBuyTicker()
                this.bindEventListener()
                $.cookie.json = true // 设置 cookie 保存、读取数据时自动转换数据
            }
            initBuyTicker() {


                const id = window.location.search.slice(4)
                console.log(id)
                $.ajax({
                    url: '/bilibili/api/ticket/project/get',
                    method: 'get',
                    data: {
                        version: '134',
                        id: id
                    },
                    dataType: 'json',
                    success: (data) => {
                        this.detail.id = id
                        this.detail.title = data.data.name
                        this.detail.screen = data.data.screen_list[0].name
                        this.detail.price = data.data.screen_list[0].ticket_list[0].price / 100
                        this.img = data.data.cover
                        this.address = data.data.venue_info.name

                        console.log(data.data)
                        const ticketHtml = template('ticket-template', { ticket: data.data })
                        $('main').html(ticketHtml)
                    }
                })
            }

            bindEventListener() {
                /* 加入购物车 */
                setTimeout(() => {
                    $('.selectable-option').on('click', function (e) {
                        $('.tickets .active').removeClass('active')
                        $(this).addClass('active')
                    })
                    $('.count-reduce').on('click', function () {
                        const num = Number($('.count-number').html())
                        if (num > 1) {
                            $('.count-number').html(num - 1)
                        }
                    })
                    $('.count-plus').on('click', function () {
                        const num = Number($('.count-number').html())
                        $('.count-number').html(num + 1)
                    })


                    $('.product-buy').on('click', e => {
                        // 构建当前选购商品对象
                        const currentProduct = {
                            id: this.detail.id,
                            title: this.detail.title,
                            screen: this.detail.screen,
                            price: this.detail.price,
                            img : this.img,
                            address :  this.address,
                            amount: 1,
                            checked: true
                        }
                        // 获取已有的购物车数组
                        const cart = $.cookie('cart') || []
                        // cart = cart.split('}')
                        console.log('typeof cart:', typeof cart)
                        console.log('cart:', cart)
                        // 判断在购物车中是否存在当前选购的商品
                        // 如果存在，则叠加数量即可
                        const has = cart.some(item => item.id == currentProduct.id)
                        if (has) { // 存在，则遍历数组中元素，修改满足条件的元素对应商品数量
                            for (let i = 0, len = cart.length; i < len; i++) {
                                if (cart[i].id === currentProduct.id) {
                                    cart[i].amount += currentProduct.amount
                                    break
                                }
                            }
                        } else {
                            // 保存到购物车中
                            cart.push(currentProduct)
                        }
                        // console.log(JSON.stringify(cart))
                        // 将购物车的数组内容保存到 cookie 中
                        $.cookie('cart', cart, { expires: 10 })
                        // 显示购物车中商品总数量
                        const total = cart.reduce((result, curr) => result + curr.amount, 0)
                        //   $('.shop_top_center_shopcart span').html(total)
                        console.log(total)
                    })
                }, 1000)


            }
        }

        new DetailPage()
    })
})